<template>
  <div>
    <!-- 展示页 -->
    <div v-loading="loading">
      <!-- 提交按钮 -->
      <el-button
        type="primary"
        :icon="Plus"
        @click="toAddSpu"
        :disabled="!category3Id"
        >添加SPU</el-button
      >
      <!-- 展示表格 -->
      <el-table border style="margin-top: 10px" :data="list">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="SPU名称" prop="spuName" width="300" />
        <el-table-column label="SPU描述" prop="description" />
        <el-table-column label="操作" width="300">
          <template v-slot="{ row, $index }">
            <el-button
              type="primary"
              :icon="Plus"
              size="small"
              @click="clickAddSku(row)"
            ></el-button>
            <el-button
              type="primary"
              :icon="Edit"
              size="small"
              @click="clickUpdateSpu(row)"
            ></el-button>
            <el-button
              type="info"
              :icon="Search"
              size="small"
              @click="toLookOver(row)"
            ></el-button>
            <el-popconfirm
              :title="`确认是否要删除?`"
              confirm-button-text="确定"
              cancel-button-text="取消"
            >
              <template #reference>
                <el-button
                  type="danger"
                  :icon="Delete"
                  size="small"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 查看SKU列表 -->
      <el-dialog
        v-model="dialogTableVisible"
        :title="`${lookOverValue?.spuName} => SKU列表`"
      >
        <el-table :data="skuList" v-loading="skuLoading">
          <el-table-column label="名称" prop="skuName" />
          <el-table-column label="价格(元)" width="150" prop="price" />
          <el-table-column label="重量(KG)" width="150" prop="weight" />
          <el-table-column label="默认图片">
            <template v-slot="{ row }">
              <el-image
                :src="row.skuDefaultImg"
                style="width: 100px"
              ></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[3, 6, 9]"
        layout="prev, pager, next ,jumper, ->,sizes,total"
        @current-change="getSpuList"
        @size-change="getSpuList"
      />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { getSkuListBySpuIdApi } from "@/api/product/sku";
  import type { SkuListModel } from "@/api/product/model/skuModel";
  export default defineComponent({
    name: "SpuList",
  });
</script>
<script lang="ts" setup>
  import { SpuStates } from "../spu";
  import type {
    SpuValueListModel,
    SpuValueModel,
  } from "@/api/product/model/spuModel";
  import { getSpuListApi } from "@/api/product/spu";
  import { useCategoryStore } from "@/stores/category";
  import { Plus, Delete, Edit, Search } from "@element-plus/icons-vue";
  import { storeToRefs } from "pinia";
  import { ref, watch } from "vue";

  const loading = ref(false);
  const currentPage = ref(1);
  const pageSize = ref(3);
  const list = ref<SpuValueListModel>([]);
  const total = ref(0);

  const { category3Id } = storeToRefs(useCategoryStore());

  const getSpuList = async () => {
    loading.value = true;
    const result = await getSpuListApi({
      page: currentPage.value,
      limit: pageSize.value,
      category3Id: category3Id.value!,
    });
    list.value = result.records;
    total.value = result.total;
    loading.value = false;
  };
  watch(
    category3Id,
    (val) => {
      if (val) {
        getSpuList();
      } else {
        list.value = [];
        total.value = 0;
      }
    },
    { immediate: true }
  );

  //   onMounted(() => {
  //     if (category3Id.value) {
  //       getSpuList();
  //     }
  //   });

  const emit = defineEmits<{
    (e: "setShowState", value: SpuStates): void;
    (e: "setSpu", value: SpuValueModel): void;
  }>();

  //点击修改 携带数据 进SPU修改页
  const clickUpdateSpu = (row: SpuValueModel) => {
    emit("setShowState", SpuStates.SPU_FORM);
    emit("setSpu", { ...row, spuImageList: [], spuSaleAttrList: [] });
  };
  //点击添加 进SKU 添加页
  const clickAddSku = (row: SpuValueModel) => {
    emit("setShowState", SpuStates.SKU_FORM);
    emit("setSpu", { ...row, spuImageList: [], spuSaleAttrList: [] });
  };
  //点击添加按钮 进入SPU添加ye
  const toAddSpu = () => {
    emit("setShowState", SpuStates.SPU_FORM);
    emit("setSpu", {
      category3Id: category3Id.value!,
      description: "",
      spuName: "",
      tmId: undefined,
      spuImageList: [],
      spuSaleAttrList: [],
    });
  };

  /* 查看SKU列表 start */
  const dialogTableVisible = ref(false);
  const lookOverValue = ref<SpuValueModel>();
  const skuList = ref<SkuListModel>([]);
  const skuLoading = ref(false);
  const toLookOver = async (row: SpuValueModel) => {
    skuLoading.value = true;
    dialogTableVisible.value = true;
    lookOverValue.value = row;
    // http://localhost:8888/app-dev/admin/product/findBySpuId/1

    const result = await getSkuListBySpuIdApi(row.id!);
    skuList.value = result;
    skuLoading.value = false;
  };
  /* 查看SKU列表 end */
</script>

<style lang="scss" scoped></style>
